<template>
  <div class="Login">
    <el-row class="tac">
      <el-col  style="height: 100%;width: 15%;">
        <cMenu :data="menuConfig" @selectMenu="selectMenu" />
      </el-col>
      <el-col style="height: 100%;width: 85%; display: flex; flex-direction: column;">
        <cTopHeader :data="{}" />

        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
          <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <DynamicPage :page-key="item.pageKey" :init_item="init_item" :query-data="queryData"  />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import cMenu from '@/components/Menu'
import DynamicPage from '@/components/DynamicPage/DynamicPage.vue'
import sysConfig from '@/systemConfig/viewConfig/sysConfig'
import sysMenu from '@/systemConfig/sysMenuConfig'
import cTopHeader from '@/components/TopHeader'

export default {
  name: 'vLogin',
  components: {
    cMenu,
    DynamicPage,
    cTopHeader,
  },
  data() {
    return {
      editableTabsValue: '',
      editableTabs: [],
      tabIndex: 0,
      menuConfig: {},
      Config: {},
      userInfo: {},
      init_item:{}
    }
  },
  methods: {
    addTab(title, pageKey, queryData) {
      const existing = this.editableTabs.find(tab => tab.pageKey === pageKey)
      if (existing) {
        existing.queryData = queryData
        this.editableTabsValue = existing.name
        if(queryData){
          this.$nextTick(() => {
          this.$bus.$emit(`refresh-page-${pageKey}`,  queryData)
        })
        }
        return
      }

      this.queryData = queryData
      const newTabName = `${++this.tabIndex}`
      this.editableTabs.push({
        title,
        name: newTabName,
        pageKey,
        queryData
      })
      this.editableTabsValue = newTabName
    },

    removeTab(targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) activeName = nextTab.name
          }
        })
      }
      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    },

      selectMenu(t, sysMenu, query_data=false) {
      if (t == false && sysMenu == 'user') {
        this.userShow = true
        this.topSecondTitle = '数据分析'
      } else {
        this.userShow = false
      }
      for (const iterator of this.Config.view) {
        if (iterator.tableName == t.tableName) {
          this.addTab(t.name, iterator.tableName, query_data)
          this.init_item = iterator
          return true
        }
      }
      this.addTab(this.topSecondTitle, this.topSecondTitle, {})
      this.init_item = {}
    }
  },
  created() {
    this.menuConfig = sysMenu
    this.Config = sysConfig
    this.userInfo = JSON.parse(localStorage.getItem("userInfo")) || {}
    this.selectMenu(false,'user',{})
    
    this.$bus.$on('index_query', (payload) => {
      console.log("emit index_queryindex_queryindex_query")
      this.selectMenu(payload.tableName,false, payload.queryData)
    })
  },
}
</script>

<style scoped>
.Login {
  width: 100%;
  display: flex;
  height: 100vh;
}

.tac {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main-table::-webkit-scrollbar {
  display: none;
}

</style>

<style>
.el-tabs__content{
  height: calc(100vh - 62px);
  overflow: scroll;
}
.el-tabs__content::-webkit-scrollbar {
  display: none;
}
.el-tabs__content .el-tabs--top{
  display: none;
}
</style>